<template>
    <div>
        <!-- 导入 -->
        <el-dialog :title="$t('ota.upgrade.importDialog.importDevice')" :visible.sync="upload.open" width="400px" @close="cancel" append-to-body>
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading"
                :on-success='handleFileSuccess' :on-progress="handleFileUploadProgress" :auto-upload="false" drag :data="params">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    {{$t('ota.upgrade.importDialog.uploadText')}}
                    <em>{{$t('ota.upgrade.importDialog.upload')}}</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                    <el-link type="info" style="font-size:12px" @click="importTemplate">
                      {{$t('ota.upgrade.importDialog.downloadDevice')}}
                    </el-link>
                </div>
                <div class="el-upload__tip" style="color:red" slot="tip">{{$t('ota.upgrade.importDialog.uploadTips')}}</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="uploadSubmit" :loading='upload.isUploading'>{{$t('common.button.confirm')}}</el-button>
                <el-button @click="upload.open = false">{{$t('common.button.cancel')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
    name: 'ImportDevice',
    props: {
        importVisible: {
            type: Boolean,
            default: false
        },
        params: {
            type: Object,
            default: () => { return { deviceTypeId: undefined, deviceModelId: undefined } }
        }
    },
    watch: {
        importVisible(val) {
            this.upload.open = val
        }
    },
    data() {
        return {
            upload: {
                open: false,
                isUploading: false,
                headers: { Authorization: "Bearer " + getToken() },
                url: process.env.VUE_APP_BASE_API + "/device/upgrade/importData",
            },
            errorList: [],
            errorVisiable: false,
            showVisiable: true,
            resultTitle : ''
        }
    },
    methods: {
        // 文件上传中处理
        handleFileUploadProgress(mtEvent, file, fileList) {
            this.upload.isUploading = true;
        },
        //文件上传成功
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();

            const analysis = response.data.analysis
            const deviceList = response.data.deviceList
            this.$emit('loadData', deviceList)
            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + analysis + "</div>", this.$t('common.alert.importResult'), { dangerouslyUseHTMLString: true });
        },
        uploadSubmit() {
            this.$refs.upload.submit()
        },
        importTemplate() {
          this.download('/device/ota/importTemplate', {
          }, `device_ota_template_${new Date().getTime()}.xlsx`)
        },
        handleConfirm() {
            this.errorVisiable = false
            this.$emit('selection', this.uploadInfos.success)
        },
        cancel(){
            this.upload.open = false
            this.showVisiable = true
            this.$emit('close')
        }
    }
}
</script>

<style lang='scss' scope>
.el-dialog__body {
    padding: 0 20px 20px;
}
.upload-title {
    // display: flex;
    // align-items: center;
    p {
        font-size: 16px;
        font-weight: 600;
    }
    // & span + & span {
    //     margin-right: 40px;
    // }
}
.error-span {
    font-weight: 600;
    display: inline-block;
    margin: 10px 0;
}
</style>
